<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>行政区划边界</title>
		<link rel="stylesheet" type="text/css"
			href="http://developer.amap.com/Public/css/demo.Default.css" />
		<script language="javascript"
			src="http://webapi.amap.com/maps?v=1.3&key=7de8697669288fc848e12a08f58d995e"></script>
		<script language="javascript" src="GCJ2WGS.js"></script>
		<script language="javascript">
			var mapObj,district;
			/*
			*初始化地图对象，加载地图
			*/
			function mapInit(){
				mapObj = new AMap.Map("iCenter",{
					view: new AMap.View2D({
					center:new AMap.LngLat(116.397428,39.90923),//地图中心点
					zoom:10 //地图显示的缩放级别
				})});
				initPolygon();
			}
			
			function initPolygon(){
				//加载云图层插件
				mapObj.plugin('AMap.DistrictSearch', function () {
					var opts = {
					subdistrict: 0, //返回下一级行政区
					extensions: 'all', //返回行政区边界坐标组等具体信息
					level:'city' //查询行政级别为 市
				};

				//实例化DistrictSearch
				district = new AMap.DistrictSearch(opts);
				//查询成功时的回调函数，定义如何展示请求返回结果
			AMap.event.addListener(district, 'complete', function(e){
						var bounds = e.districtList[0].boundaries;
						 var polygons = [];
						var arr = [];
						if(bounds){
							for(var i =0, l = bounds.length;i < l; i++){
								//生成行政区划polygon
								var polygon = new AMap.Polygon({
									map:mapObj,
									strokeWeight:1,
									path:bounds[i],
									fillOpacity:0.7,
									fillColor:'#CCF3FF',
									strokeColor:'#CC66CC'
								});
								polygons.push(polygon);
							}
							mapObj.setFitView();//地图自适应
						}
						for(var i=0;i<bounds.length;i++){
							var lnglatArr = polygons[i].getPath();
							for(var j=0;j<lnglatArr.length;j++){
								arr.push(lnglatArr[j].toString());
							}
						}
						document.getElementById("info").innerText = arr.join(";");
						arr = [];//释放数组
					});
			});
			}
			/*
			*叠加云数据图层
			*/
			function drawPolygon() {
				var level = document.getElementById("level").value;
				var name = document.getElementById("district").value;
				var isClear = document.getElementById("isClear").value;
				if(district == ""){
					alert("请输入行政区名称！");
					return false;
				}
				if(isClear == 1){
					mapObj.clearMap();//清除地图覆盖物
				}
			district.setLevel(level);//行政区查询 district 
			district.search(name); //行政区查询
			}

			/**
			 * 绘制定位点
			 */
			function drawPoint(){
				var marker;
					if (marker) {
						return;
					}
					marker = new AMap.Marker({
						icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
						position: JSON.parse("["+document.getElementById("point").value+"]")
					});
					marker.setMap(mapObj);
			}

			/**
			 * 火星坐标转化（高德地图坐标）为地球坐标（国际标准坐标）
			 * @constructor
			 */
			function GCJToWGS(){
                var lat = ""; //纬度
				var lon = ""; //经度
				lat = (document.getElementById("GCJPoint").value).split(",")[1];
				lon = (document.getElementById("GCJPoint").value).split(",")[0];
				var convertedPoint = GPS.gcj_decrypt(lat,lon);

				document.getElementById("WGSPoint").value = (convertedPoint.lon+","+convertedPoint.lat);
			}
		</script>
	</head>
	<body onLoad="mapInit()">
		<div id="iCenter"></div>
		<div style="height: 80px;width:1000px;">
			<table style="width:100%;height:100%;" align="center">
				<tr height="40px">
					<td width="15%" align="right">选择行政区级别：</td>
					<td width="35%">
						<select id="level">
							<option value="country">国家</option>
							<option value="province">省/直辖市</option>
							<option value="city" selected="selected">市</option>
							<option value="district">区/县</option>
							<option value="biz_area">商圈</option>
						</select>
					</td>
					<td width="50%" rowspan="4" align="center" height="160px">
						<textarea id="info" rows="3" style="width:100%;height:100%;padding: 2px 0px 0px 5px; font-size: 12px; color: red; overflow-y: auto"></textarea>
					</td>
				</tr>
				<tr height="40px">
					<td align="right">行政区名称：</td>
					<td><input type="text" name="district" id="district"/></td>
				</tr>
				<tr height="40px">
					<td align="right">是否清除覆盖物：</td>
					<td><select id="isClear">
							<option value="1" selected="selected">是</option>
							<option value="0">否</option>
						</select>
					</td>
				</tr>
				<tr height="40px">
					<td align="right">定位点：</td>
					<td><input type="text" name="point" id="point"/></td>
				</tr>
				<tr height="40px">
					<td align="right">火星坐标：</td>
					<td><input type="text" name="GCJPoint" id="GCJPoint"/></td>
				</tr>
				<tr height="40px">
					<td align="right">地球坐标：</td>
					<td><input type="text" name="WGSPoint" id="WGSPoint"/></td>
				</tr>
				<tr height="40px">
					<td colspan="2" align="center"><input type="button" value="绘制" onclick="drawPolygon()"/></td>
				</tr>
				<tr height="40px">
					<td colspan="2" align="center"><input type="button" value="绘制定位点" onclick="drawPoint()"/></td>
				</tr>
				<tr height="40px">
					<td colspan="2" align="center"><input type="button" value="转换为国标" onclick="GCJToWGS()"/></td>
				</tr>
			</table>
		</div>
	</body>
</html>
